<template>
    <!-- <h3>试卷详情页</h3> -->
    <div class="exam-detail">
        <div class="opt">
            <span class="label">名称:</span> <span>[{{ detail.name }}]</span>
        </div>
        <div class="opt">
            <span class="label">用户:</span><span>{{ nickName }}</span>
        </div>
        <div class="opt">
            <span class="label">考试时间:</span><span>{{  formatime(detail.time * 60 * 60) }}</span>
        </div>
        
        <div class="opt">
            <span class="label">题目数量:</span> <span>{{ detail.num }}题</span>
        </div>

        <div class="opt">
            <span class="label">总分:</span> <span>{{ detail.total }}分</span>
        </div>

        <div class="opt">
            <span class="label">及格线:</span> <span>{{ detail.passline }}分</span>
        </div>

        <div class="opt">
            <van-button class="btn-1" @click="startFn" plain size="small" type="success">开始考试</van-button>
            <van-button @click="jumpTo" plain size="small" type="primary">返回</van-button>
        </div>

    </div>
</template>

<script setup lang="ts">
import { useRouter , useRoute } from 'vue-router'

// 导入获取储存对象的函数
import { useExamStore } from '@/stores/exam'
import { storeToRefs } from 'pinia'
import { ref } from 'vue';
// 记录储存对象
const examStore = useExamStore()
// 从储存对象中直接取值
let {exams} = storeToRefs(examStore)

const $router = useRouter()
const $route = useRoute()

let { eid } = $route.query;
let nickName = localStorage.getItem("NICKNAME")
let detail = ref<any>({
    name: '',
    eid: '',
    time: ''
}) as any

const startFn = ()=> {
    $router.push({path:'/testpaper',query:{ eid: eid, name: detail.value.name , time: detail.value.time}})
}
const jumpTo = ()=> {
    $router.push({path:'/home/category'})
}

const formatime = (value:number) => {
    let h:number | string = 0, m:number | string = 0 , s:number | string = 0;
    h = Math.floor(value / 3600);
    m = Math.floor(value % 3600 / 60);
    s = Math.floor(value % 60);

    h = h < 10 ? '0'+h:h ;
    m = m < 10 ? '0'+m:m ;
    s = s < 10 ? '0'+s:s ;

    return `${h}:${m}:${s}`
}
if(eid){
    // console.log(exams);
    setTimeout(()=>{
        let arr = exams.value;
        // console.log(arr);
        let newArr = arr && arr.filter((item: any)=>{
            // console.log(item);
            return item.eid == eid;
        })
        // console.log(newArr);
        if(newArr.length != 0) {
            detail.value = newArr[0]
            console.log(newArr[0])
            console.log(detail.value)
        }
    },150)
}

</script>
<style lang="less">
@import '../../static/less/variable.less';
.exam-detail {
    padding: @pad;
    margin-top: 20px;
    .opt {
        width: 100%;
        display: flex;
        font-size: 18px;
        margin-top: 15px;
        .label {
            display: inline-block;
            width: 100px;
            text-align: right;
            padding-right: 10px;
            font-weight: bold;
            font-size: 16px;
        }
        .btn-1 {
            margin-right: 10px;
        }
    }
}
</style>